<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>My Orders</title>
  <link rel="stylesheet" type="text/css" href="/static/css/dining.css" />
</head>
<body>
<header th:replace="common/top"></header>
<div id="BackLink">
  <a href="/catalog/index">Return to Main Menu</a>
</div>

<h2>My Orders</h2>

<table>
  <tr>
    <th>Order ID</th>
    <th>Date</th>
    <th>Total Price</th>
  </tr>

  <!-- 使用 Thymeleaf 的 th:each 来遍历订单列表 -->
  <tr th:each="order : ${orderList}">
    <td>
      <a th:href="@{viewOrderForm(event=viewOrder, orderId=${order.orderId})}">
        <span th:text="${order.orderId}"></span>
      </a>
    </td>
    <td>
      <!-- 使用 SimpleDateFormat 格式化日期 -->
      <span th:text="${#dates.format(order.orderDate, 'yyyy/MM/dd HH:mm:ss')}"></span>
    </td>
    <td>
      <!-- 使用 NumberFormat 格式化货币 -->
      <span th:text="${#numbers.formatCurrency(order.totalPrice)}"></span>
    </td>
  </tr>

  <!-- 如果没有订单，显示没有订单的消息 -->
  <tr th:if="${#lists.isEmpty(orderList)}">
    <td colspan="3">No orders.</td>
  </tr>
</table>

</body>
</html>